<template>
  <div class="container">
    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="53px">
      <x-header class="my-header" >订单列表</x-header>
      <div>
        <tab   active-color="white" style="background-color: rgb(255, 104, 140)" v-model="index">
          <tab-item  @on-item-click="onItemClick">未付款</tab-item>
          <tab-item selected @on-item-click="onItemClick">未完成</tab-item>
          <tab-item @on-item-click="onItemClick">已完成</tab-item>
          <!--<tab-item class="vux-center" :selected="demo === item" v-for="(item, index) in list2" @click="demo = item" :key="index">{{item}}</tab-item>-->
        </tab>
        <divider v-if="nodata">您暂时没有此类订单</divider>
        <orders v-if="index==0" v-for="item in this.unPayed_list" :orderData="item"></orders>
        <orders v-if="index==1" v-for="item in this.ordering_list" :orderData="item"></orders>
        <orders v-if="index==2" v-for="item in this.over_list" :orderData="item"></orders>
      </div>

    </view-box>
  </div>
</template>

<script>
  import {Divider,XHeader,ViewBox,Tab, TabItem,SwiperItem,Swiper  } from 'vux'
  import orders from "@/components/order_process/orders"
  export default {
    data(){
      return {
        index:1,
        unPayed_list:[],       //未付款订单列表
        ordering_list:[],        //进行中订单
        over_list:[],            //已结束订单
        show_list:[],              //展示的订单列表
        nodata:true                //是否有该类订单
      }
    },
    mounted(){
      console.log(this.index)
      this.initdata()
    },
    methods:{
      initdata(){
        let data0={
          order_type:1,
          user_type:1,
          isOK:1,
          isPayInLocal:0,
          isPayInRemote:0,
          isCancel:0,
          isDelete:0
        }
        this.Ajax('post','/Order/Order/myOrder',data0,(res)=>{
          this.unPayed_list=res.dataList
          this.unPayed_list.forEach((item)=>{
            item.index=0
          })
          this.onItemClick (1)
        })
        let data1={
          order_type:1,
          user_type:1,
          isOK:1,
          isPayInLocal:1,
          isPayInRemote:0,
          isCancel:0,
          isDelete:0,
          count:100
        }
        this.Ajax('post','/Order/Order/myOrder',data1,(res)=>{
          this.ordering_list=res.dataList
          this.ordering_list.forEach((item)=>{
            item.index=1
          })
          this.onItemClick (1)
        })
        let data2={
          order_type:1,
          user_type:1,
          isOK:1,
          isFinishByUser:1,
          isDeleteByUser:0,
        }
        this.Ajax('post','/Order/Order/myOrder',data2,(res)=>{
          this.over_list=res.dataList
          this.over_list.forEach((item)=>{
            item.index=2
          })
          this.onItemClick (1)
        })
      },
      onItemClick (index) {
        this.show_list=[]
        switch (index){
          case 0:
            if(this.unPayed_list.length!==0){
              this.nodata=false
            }else{
              this.nodata=true
            }
            break;
          case 1:
            if(this.ordering_list.length!==0){
              this.nodata=false
            }else{
              this.nodata=true
            }
            break
          case 2:
            if(this.over_list.length!==0){
              this.nodata=false
            }else{
              this.nodata=true
            }
            break
        }
      },
    },
    components: {
      orders,Divider,
      XHeader,
      ViewBox,
      Tab,
      TabItem,
      SwiperItem,
      Swiper
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .my-header {
    background-color: rgb(255, 104, 140);
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
  }
</style>
